2024 IT鐵人賽 Day12 -增加、移除Class

javascript javascript 30

will93068 2024-10-09 20:36:11 ‧ 173 瀏覽

分享至

透過ClassList add增加、remove移除

透過兩個按鈕做一個清單開關收闔

1.首先先用CSS預設list清單是消失 display = none;
2.在設置兩個按鈕開啟、關閉
3.querySelector 尋找兩顆按鈕，並註冊監聽
4.透過classList 增加移除 show

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>增加、移除classlist</title>
  </head>
  <style>
    .container {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      gap: 15px;
    }
    a {
      padding: 20px 50px;
      background-color: #31a080;
      text-decoration: none;
      text-align: center;
      border-radius: 50px;
    }
    .list {
      display: none;
      width: 200px;
      background-color: orange;
      flex-direction: column;
      gap: 15px;
    }
    .list.show {
      display: flex;
    }
  </style>
  <body>
    <div class="container">
      <a href="#" class="OpenBtn">展開選單</a>
      <a href="#" class="CloseBtn">關閉選單</a>


      <div class="Textlist">
        <ul class="list">
          <li>事件1</li>
          <li>事件2</li>
          <li>事件3</li>
          <li>事件4</li>
        </ul>
      </div>
    </div>

    <script>
      const OpenBtn = document.querySelector(".OpenBtn");
      console.log(OpenBtn);
      const CloseBtn = document.querySelector(".CloseBtn");
      console.log(OpenBtn);

      const OpenList = document.querySelector(".list");
      console.log(OpenList);

      const TextList = document.querySelector(".Textlist");
      console.log(TextList);



      OpenBtn.addEventListener("click", () => {
        OpenList.classList.add("show");  // 增加
      });



      CloseBtn.addEventListener("click", () => {
        OpenList.classList.remove("show");  //移除
      });
    </script>
  </body>
</html>